<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('部门事项信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: ztree-css" />


    <link rel="stylesheet" th:href="@{/css/sku_style.css}"/>
    <style>
        body{height:auto;font-family: "Microsoft YaHei";}
        button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
        .ztree{
            position: absolute;
            z-index: 888;
            background-color: #eee;
            border: 1px solid #ccc;
            overflow: auto;
            width: 150px;
            min-height: 50px;
            max-height: 300px;
        }
        #tree_1{
            margin-left: -20px;
        }
        .tree_div,.mytree_div{
            position: relative;
        }

        .caret1,.caret2{
            float: right;
            position: absolute;
            margin-left: -15px;
            top: 10px;
        }
    </style>
</head>
<body class="white-bg">
<div class="container-div">
    <div class="demo-title">部门事项信息</div>

    <div id="skuTable">
        <table class="skuTable">
            <thead>
            <tr>
                <th style="width: 150px;">责任部门</th>
                <th style="display: none">事项ID</th>
                <th style="width: 170px;">项目名称</th>
                <th style="width: 170px;">事项名称</th>
                <th style="width: 170px;">负责人</th>
                <th style="width: 170px;">审核状态</th>
                <th style="width: 150px;">计划完成时间</th>
                <th style="width: 80px;">红灯预警天数</th>
                <th style="width: 80px;">黄灯预警天数</th>
                <th style="width: 80px;">亮灯情况</th>
            </tr>
            </thead>
            <tbody id="mytbody">

            </tbody>
        </table>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: ztree-js" />

<script th:inline="javascript">
    var prefix = ctx + "linkong/matterProject";
    var mydata = {};
    $(function (){
        $.ajax({
            url: prefix + "/getDeptMoreList",
            type: 'POST',
            data: {},
            async: false,
            success: function (data) {
                mydata = data;
            }
        })
        listShow();
    })

    function listShow() {
        var str = "";
        var index = 1;
            for(var obj in mydata ){
                var myarr = mydata[obj];
                var len = myarr.length;
                str += '<tr>'
                    + '<td rowspan='+ len + '>'+ obj + '</td>';
                $.each(myarr, function (i, value){
                    str +=  '<td style="display: none" class="id">' + value.id + '</td>'
                        + '<td class="projectName">'+ value.projectName + '</td>'
                        + '<td class="name">'+ value.name + '</td>'
                        + '<td class="approveUser">'+ value.approveUsername + '</td>'
                        + '<td class="status">'+ value.status + '</td>'
                        + '<td class="expectedDate">'+ value.expectedDate.substr(0,10) +'</td>'
                        + '<td class="redLightDays">'+ value.redLightDays +'</td>'
                        + '<td class="yelLightDays" >'+ value.yelLightDays +'</td>'
                        + '<td >';
                            if(value.light == '1'){
                                str += '<img  class="imgtag" src="../../img/light_02.png" alt="">'
                            }else if(value.light == '2'){
                                str += '<img  class="imgtag" src="../../img/light_03.png" alt="">'
                            }
                        str += '</td></tr>';

                })
                index += 1;
            }
            $("#mytbody").html(str);

        $("input[name='onlineTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    }

    function submitHandler() {
        $.modal.close();
    }

</script>

</body>
</html>